<template>

    <div class="app-body">
        <div class="detail-img">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in goods.pictures">
                        <img :src="item"/>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-white"></div>
            </div>
        </div>
        <div class="detail-info">
            <p class="name">{{goods.name}}</p>
            <br>
            <p v-if="goods.coupon_status > 0" class="original-price"><s>原价   {{goods.price}}</s></p>
            <div class="price-box">
                <span class="price">￥{{goods.coupon_price}}</span>
                <img v-if="goods.coupon_status > 0" style="width: 3rem;" src="images/coupon_price.png">
                <span class="volume">{{goods.volume}} 笔成交</span>
            </div>
        </div>
        <div class="detail-coupon" v-if="goods.coupon_status > 0">
            <p class="coupon-amount">{{goods.coupon_amount}} 元优惠券</p>
            <p class="coupon-date">使用期限{{goods.coupon_start_time}} ~ {{goods.coupon_end_time}}</p>
        </div>
        <div class="detail-content">
            <p class="title">宝贝详情</p>
            <div class="content" v-html="goods.detail">

            </div>

        </div>
        <div class="detail-buy">
            <div class="collect">
                <i class="iconfont icon-star1"></i>
                <p>收藏</p>
            </div>
            <div class="go-buy" v-if="goods.coupon_status > 0">
                <a :href="goods.coupon_click_url">
                    <p>￥{{goods.coupon_price}}</p>
                    <p>去领券</p>
                </a>
            </div>
            <div class="go-buy">
                <a :href="goods.click_url">
                    <p>￥{{goods.coupon_price}}</p>

                    <p>去购买 </p>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        data(){
            return {
                goods:{},
                id:this.$route.params.id,
            }
        },
        mounted() {

            this.getDetail();

        },
        methods:{
            initSwiper(){
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    loop: true,
                    speed: 600,
                    autoplay: 4000,
                    onTouchEnd: function() {
                        swiper.startAutoplay()
                    }
                });
            },
            getDetail(){
                let that                    =   this;
                this.api.get('api/goods/detail',{params:{id:that.id}}).then(function(response){
                    if(response.status==200){
                        that.goods=response.data;
                        that.initSwiper();
                        document.setTitle(that.goods.name);
                    }
                });
            }
        }
    }
</script>
